<template>
	<view class="mainV">
		<view class="patientV">
			<view class="maint">就诊人</view>
			<view class="patientVcn" @click="openAddPatient" v-if="patientList.length <1">
				<view class="patientVcnb1"></view>
				<view class="patientVcnb2"></view>
				<view class="patientVcnb">
					<uv-icon name="plus-circle" color="#2c9b94" size="38" /> 添加就诊人
				</view>
			</view>
			<view class="patientVc" v-else>
				<view class="patientVct">
					<view class="patientVctl">
						<view class="patientVctli" v-for="(i,o) in patientList" :key="o" @click="activePatient = i">
							<view :class="['patientVctlit',activePatient.id == i.id ? 'patientVctlitA' :'']"> <uv-icon
									name="account-fill" color="#2c9b94" size="18" /></view>
							<view :class="['patientVctlic',activePatient.id == i.id ? 'patientVctlicA' :'']">{{i.name}}</view>
							<view v-if="activePatient.id == i.id"> <uv-icon name="arrow-down-fill" color="#2c9b94" size="12" />
							</view>
						</view>
					</view>
					<view class="patientVcta" @click="openAddPatient"><uv-icon name="plus-circle" color="#fff" size="18" />
						添加就诊人</view>
				</view>
				<view class="patientVcc">
					<img class="patientVccimg"
						src="https://www.ysrs.xyz/apiI/ll/file/preview/1743073144181ff80808195d597d90195d7416d750003.png" alt="" />
					<view class="patientVccc">
						<view class="patientVccci">
							<view>{{activePatient.name}}</view>
							<view>{{activePatient.sex == 1 ? '男' :'女'}}</view>
							<view>{{getAge(activePatient.idCard)}}岁</view>
						</view>
						<view class="patientVccci">身份证号：{{activePatient.idCard}} </view>
						<view class="patientVccci">就诊卡号：{{activePatient.cardNo}} </view>
						<view class="patientVccci">联系方式：{{activePatient.phone}} </view>
					</view>
				</view>
				<view class="patientVcb">
					<view class="patientVcbl" @click="subBind(activePatient)">
						<view class="patientVcblb"> <uv-icon v-if='activePatient.isBind' name="checkmark" color="#ffffffcc"
								size="18"></uv-icon>
						</view>
						设置为默认就诊人
					</view>
					<view class="patientVcbr" @click="unbind()">
						<img src="https://www.ysrs.xyz/apiI/ll/file/preview/1743075460014ff80808195d597d90195d764c3ae0012.png"
							alt="" />解绑
					</view>
				</view>
			</view>
		</view>


		<uv-modal ref="unbindmodal" title="就诊人解绑" content='确定解除就诊人与应用的绑定解除绑定前请确认是否有未处理完成的业务)' :closeOnClickOverlay="false"
			:showCancelButton="true" @confirm="confirmUnbind"></uv-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				patientList: [{
						name: '张三三三',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 11,
						isBind: true
					},
					{
						name: '李四三',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 12
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 123
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 113
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 143
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 134
					},
				],
				activePatient: {
					name: '张三三',
					idCard: '371102199903051154',
					sex: 1,
					isBind: true,
					cardNo: '202503250012',
					phone: 13322332233,
					id: 11
				},

			}
		},
		methods: {
			openAddPatient() {
				uni.navigateTo({
					url: '/pages/AddPatient/AddPatient'
				})
			},
			getAge(idCard) {
				return new Date().getFullYear() - idCard.substring(6, 10)
			},
			confirmUnbind() {
				this.activePatient.id;
			},
			unbind() { //解绑
				this.$refs.unbindmodal.open()
			},
			subBind(row) { //设为默认

			},

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		background: linear-gradient(to bottom, #2c9b9433, #fff);
	}

	.mainV {
		position: relative;
		z-index: 9;

		.patientV {
			width: 660rpx;
			padding: 30rpx;
			background: #FFFFFFaa;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.15);
			margin: -150rpx auto 0;
			border-radius: 16rpx;

			.patientVc {
				.patientVct {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.patientVctl {
						display: flex;
						align-items: center;
						max-width: 400rpx;
						overflow-y: auto;
						padding-top: 10rpx;

						.patientVctli {
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
							margin-right: 10rpx;
							min-width: 90rpx;

							.patientVctlit {
								width: 30rpx;
								height: 30rpx;
								border-radius: 50%;
								box-shadow: 0 0 12rpx #888;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.patientVctlitA {
								box-shadow: 0 0 12rpx #2c9b94;
							}

							.patientVctlic {
								font-size: 23rpx;
							}

							.patientVctlicA {
								color: #2c9b94;
							}
						}
					}

					.patientVcta {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 10rpx;
						background-color: #2c9b94;
						border-radius: 12rpx;
						color: #fff;

						/deep/text {
							display: block;
							margin-right: 10rpx;
							margin-top: 2rpx;
						}
					}
				}

				.patientVcc {
					margin-top: 20rpx;
					border-radius: 16rpx;
					width: 660rpx;
					height: 320rpx;
					// background-image: url(https://www.ysrs.xyz/apiI/ll/file/preview/1743073144181ff80808195d597d90195d7416d750003.png);
					// background-size: 100% 100%;
					// background-repeat: no-repeat;
					position: relative;

					.patientVccimg {
						border-radius: 12rpx;
						position: absolute;
						top: 0%;
						left: 0;
						z-index: 2;
						opacity: .8;
						width: 100%;
						height: 100%;
					}

					.patientVccc {
						position: absolute;
						z-index: 9;
						top: 40rpx;
						left: 90rpx;

						.patientVccci {
							display: flex;
							align-items: center;
							color: #fff;
							font-size: 30rpx;
							text-shadow: 0 0 6rpx #000;
							margin-bottom: 6rpx;

							&:first-of-type {
								font-weight: bold;
								font-size: 34rpx;
								margin-bottom: 10rpx;
							}

							view {
								margin-right: 20rpx;
							}
						}
					}
				}

				.patientVcb {
					border-radius: 8rpx;
					margin-top: 10rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					// background: linear-gradient(to right, rgba(86, 211, 216, .7), rgba(82, 190, 226, .8));
					padding: 0 20rpx;

					.patientVcbl {
						display: flex;
						align-items: center;
						color: #333;

						.patientVcblb {
							background-color: rgb(41, 154, 148);
							border-radius: 50%;
							margin-right: 10rpx;
							width: 36rpx;
							height: 36rpx;
						}
					}

					.patientVcbr {
						color: #fff;
						background-color: #888;
						border-radius: 6rpx;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						padding: 6rpx 10rpx;

						img {
							width: 30rpx;
							height: 30rpx;
						}
					}

				}

			}

			.patientVcn {
				box-sizing: border-box;
				border-radius: 16rpx;
				width: 660rpx;
				height: 320rpx;
				border: 3px solid #2c9b94;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				.patientVcnb1 {
					width: 660rpx;
					position: absolute;
					height: 220rpx;
					left: -6rpx;
					top: 50rpx;
					background-color: #fff;
					z-index: 8;
				}

				.patientVcnb2 {
					width: 560rpx;
					position: absolute;
					height: 320rpx;
					left: 50rpx;
					top: -6rpx;
					background-color: #fff;
					z-index: 8;
				}

				.patientVcnb {
					position: relative;
					z-index: 9;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 42rpx;
					font-weight: bold;
					color: #2c9b94;

					/deep/text {
						display: block;
						margin-right: 20rpx;
					}
				}
			}
		}

	}
</style>